<template>
  <div id="detailPage" @click="bodyClick">
    <HeadNav
      type="application"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="application" sort="authors"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container" v-if="pagePower">
            <div class="model-container">
              <div class="model-bg goods-detail" style="position: relative">
                <div>
                  <img
                    :src="authorInfo.photo"
                    alt
                    v-if="authorInfo.photo"
                    style="border-radius: 10px; width: 175px; height: 175px"
                  />
                  <span
                    v-else
                    class="no-pic"
                    style="
                      min-width: 175px;
                      min-height: 175px;
                      border-radius: 10px;
                    "
                  ></span>
                  <div class="goods-desc author-desc">
                    <div class="authors" :title="authorInfo.name">
                      {{ authorInfo.name }}
                    </div>
                    <div style="height:36px;">
                      <span class="data-tab data-tab-eleven" v-if="authorInfo.rank">作家榜第{{authorInfo.rank}}名</span>
                      <span class="data-tab data-tab-eleven" v-if="authorInfo.weibo.rank">微博粉丝榜第{{authorInfo.weibo.rank}}名</span>
                    </div>
                    <div style="margin-top: 5px">
                      <span class="lable">微博</span>
                      <span class="value">
                        <span class="click-font" @click="$openNewPage(2,authorInfo.weibo.link)" v-if="authorInfo.weibo.link">{{authorInfo.weibo.nickname?authorInfo.weibo.nickname:'链接'}} <span v-if="authorInfo.weibo.fans_count">粉丝数 {{authorInfo.weibo.fans_count}}</span></span>
                        <span v-else>尚未关联</span>
                      </span>
                    </div>
                    <div style="margin-top: 5px">
                      <span class="lable">抖音</span>
                      <span class="value">
                        <span class="click-font" @click="$openNewPage(2,authorInfo.douyin.link)" v-if="authorInfo.douyin.link">{{authorInfo.douyin.nickname?authorInfo.douyin.nickname:'链接'}} <span v-if="authorInfo.douyin.fans_count">粉丝数 {{authorInfo.douyin.fans_count}}</span></span>
                        <span v-else>尚未关联</span>
                      </span>
                    </div>
                    <div style="margin-top: 5px">
                      <span class="lable">国家</span>
                      <span class="value">{{ authorInfo.country }}</span>
                    </div>
                    <div class="money" v-if="authorInfo.death_date">
                      <span class="lable">生卒</span>
                      <span class="value"
                        >{{ authorInfo.birthday }}-{{
                          authorInfo.death_date
                        }}</span
                      >
                    </div>
                    <div class="money" v-else>
                      <span class="lable">生日</span>
                      <span class="value" v-if="authorInfo.birthday">{{
                        authorInfo.birthday
                      }}</span>
                      <span class="value" v-else>--</span>
                    </div>
                    <!-- <div class="description">
                      <span style="vertical-align:top;">获奖</span>
                      <span class="value" :title="authorInfo.description">{{authorInfo.description}}</span>
                    </div> -->
                    <div class="cate">
                      <span class="lable">类目</span>
                      <span class="value">{{
                        authorInfo.category_name
                          ? authorInfo.category_name
                          : "--"
                      }}</span>
                    </div>
                  </div>
                </div>
                <!-- 标签页 -->
                <div class="tabs">
                  <a-tabs :activeKey="tabKey" @change="callback">
                    <a-tab-pane key="3" tab="作者分析"></a-tab-pane>
                    <a-tab-pane key="1" tab="作品列表"></a-tab-pane>
                    <a-tab-pane key="2" tab="详细信息"></a-tab-pane>
                  </a-tabs>
                </div>
              </div>
              <div
                :class="editPower ? 'click-font' : ''"
                @click="toEdit"
                style="
                  position: absolute;
                  right: 15px;
                  top: 25px;
                  font-size: 12px;
                "
              >
                编辑
              </div>
            </div>
            <!-- <div class="model-container" v-if="tabKey == '1'">
              <div class="model-bg">
                <div class="section-title">
                  <a-select v-model="saleType" style="width: 120px">
                      <a-select-option value="on_sale">在售品种</a-select-option>
                      <a-select-option value="tm">畅销品种</a-select-option>
                      <a-select-option value="jd">常销品种</a-select-option>
                      <a-select-option value="dd">一般品种</a-select-option>
                      <a-select-option value="pdd">滞销品种</a-select-option>
                      <a-select-option value="wph">停售品种</a-select-option>
                    </a-select>
                </div>
              </div>
            </div> -->
            <!-- 作品列表 -->
            <div class="model-container" v-if="tabKey == '1'">
              <div class="model-bg" style="min-height: 377px">
                <div class="section-title">作品列表</div>
                <div class="table">
                  <table style="table-layout: fixed">
                    <colgroup>
                      <col width="55" />
                      <col width="240" />
                      <col width="140" />
                      <col width="140" />
                      <col width="120" />
                      <col width="100" />
                      <col width="120" />
                      <col width="120" />
                    </colgroup>
                    <thead>
                      <tr>
                        <td style="text-align: center">排名</td>
                        <td>品种</td>
                        <td>作者</td>
                        <td style="text-align: center">类目</td>
                        <td style="text-align: center">ISBN</td>
                        <td style="text-align: right">定价</td>
                        <td style="text-align: right">出版社</td>
                        <td style="text-align: right">月均销售册数</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item, index) in goodsList" :key="index">
                        <td style="text-align: center">
                          {{ index + 1 + (pageSize * page - pageSize) }}
                        </td>
                        <td>
                          <div class="goods-desc">
                            <span class="goods-image" v-if="item.cover_pic">
                              <img
                                :src="item.cover_pic"
                                alt
                                style="width: 40px; height: 40px"
                              />
                              <div
                                class="goods-logo prev"
                                v-if="item.is_presale == 1"
                              >
                                预
                              </div>
                              <div
                                class="goods-logo group"
                                v-else-if="item.have_presale == 1"
                              >
                                组
                              </div>
                            </span>
                            <span
                              v-else
                              class="no-pic"
                              style="min-width: 40px; min-height: 40px"
                            ></span>
                            <span
                              class="click-font goods-name"
                              :title="item.name"
                              @click="$toDetail(item.goods_id)"
                              >{{ item.name }}</span
                            >
                          </div>
                        </td>
                        <td>
                          <div class="author">
                            <div
                              class="author-name"
                              v-if="item.authors.length == 0"
                            >
                              {{ item.author }}
                            </div>
                            <div
                              class="author-name click-font"
                              v-if="item.authors.length == 1"
                              @click.stop="$toAuthor(item.authors[0].author_id)"
                            >
                              {{ item.author }}
                            </div>
                            <div
                              class="author-name click-font"
                              v-if="item.authors.length > 1"
                              @click.stop="openAuthor(item, index)"
                            >
                              {{ item.author }}
                            </div>
                            <div class="author-list" v-if="item.active">
                              <div v-if="item.authors.length > 0">
                                <div
                                  class="author-item click"
                                  v-for="(aitem, aindex) in item.authors"
                                  :key="aindex"
                                  @click.stop="$toAuthor(aitem.author_id)"
                                >
                                  {{ aitem.name }}
                                </div>
                              </div>
                              <div v-else>
                                <div class="author-item">
                                  未查询到对应作者信息
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td style="text-align: center">
                          <span v-if="item.cate_node_2">{{
                            item.cate_node_2
                          }}</span>
                          <span v-if="item.cate_node_3"
                            >> {{ item.cate_node_3 }}</span
                          >
                          <span v-if="item.cate_node_4"
                            >> {{ item.cate_node_4 }}</span
                          >
                        </td>
                        <td style="text-align: center">{{ item.isbn }}</td>
                        <td style="text-align: right">
                          ￥{{ item.fixed_price.toFixed(2) }}
                        </td>
                        <td style="text-align: right">{{ item.publisher }}</td>
                        <td style="text-align: right">
                          <span class="main-font">{{
                            item.month_sale_text
                          }}</span>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr>
                        <td colspan="8" style="text-align: right">
                          <a-pagination
                            :show-total="(total) => `共 ${total} 条数据`"
                            :default-current="1"
                            :total="total"
                            v-model="page"
                            :defaultPageSize="pageSize"
                            @change="onShowSizeChange"
                          />
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
            <!-- 详细信息 -->
            <div class="model-container" v-if="tabKey == '2'">
              <div class="model-bg" style="min-height: 377px">
                <div class="section-title">作者介绍</div>
                <div style="padding: 15px">
                  {{ authorInfo.description }}
                </div>
              </div>
            </div>
            <!-- 作者分析 -->
            <div class="model-container life-cycle" v-if="tabKey == '3'">
              <div class="model-bg">
                <div class="section-title">作品数据</div>
                <div class="data-choose">
                  <span class="data-block" style="width: 180px">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">累计销售指数</span>
                    </div>
                    <div class="data-font">
                      {{ baseData.sale_total.toLocaleString() }}
                    </div>
                  </span>
                  <span class="data-block" style="width: 180px">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">在售作品数</span>
                    </div>
                    <div class="data-font">
                      {{ baseData.onsale_count.toLocaleString() }}
                    </div>
                  </span>
                  <span class="data-block" style="width: 180px">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">畅销作品数</span>
                    </div>
                    <div class="data-font">
                      {{ baseData.popular_count.toLocaleString() }}
                    </div>
                  </span>
                  <span class="data-block" style="width: 180px">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">常销作品数</span>
                    </div>
                    <div class="data-font">
                      {{ baseData.frequently_count.toLocaleString() }}
                    </div>
                  </span>
                </div>
              </div>
            </div>
            <!-- 基础特征 -->
            <div class="model-container basic" v-if="tabKey == '3'">
              <div class="model-bg">
                <div class="section-title">基础特征</div>
                <div class="feature">
                  <div class="clearfix" style="padding: 15px">
                    <div class="float-left" style="width: 500px">
                      <div style="font-size: 12px">性别分布</div>
                      <div v-if="ringData1.length > 0">
                        <div
                          id="ring1"
                          style="
                            width: 400px;
                            margin-top: 20px;
                            margin-left: 30px;
                          "
                        ></div>
                      </div>
                      <div style="width: 500px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                      <div style="margin-top: 20px; font-size: 12px">
                        近一年消费
                      </div>
                      <div v-if="ringData2.length > 0">
                        <div
                          id="ring2"
                          style="
                            width: 266px;
                            margin-left: 90px;
                            margin-top: 20px;
                          "
                        ></div>
                        <div class="column" style="width: 270px">
                          <a-row type="flex" justify="space-around">
                            <a-col
                              v-for="(item, index) in ringData2"
                              :key="index"
                            >
                              <div class="column-num">{{ item.value }}%</div>
                              <div class="column-name">{{ item.name }}</div>
                            </a-col>
                          </a-row>
                        </div>
                      </div>
                      <div style="width: 500px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                    </div>
                    <div
                      class="float-left"
                      style="margin-left: 10px; width: 500px"
                    >
                      <div style="margin-left: 40px; font-size: 12px">
                        年龄分布
                      </div>
                      <div v-if="columnData1.length > 0">
                        <div
                          id="column1"
                          style="
                            width: 400px;
                            margin-left: 90px;
                            margin-top: 20px;
                          "
                        ></div>
                        <div class="column">
                          <a-row>
                            <a-col
                              :span="4"
                              v-for="(item, index) in columnData1"
                              :key="index"
                            >
                              <div class="column-num">{{ item.value }}%</div>
                              <div class="column-name">{{ item.name }}</div>
                            </a-col>
                          </a-row>
                        </div>
                      </div>
                      <div style="width: 500px; margin-left: 38px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                      <div
                        style="
                          font-size: 12px;
                          margin-top: 45px;
                          margin-left: 40px;
                        "
                      >
                        <span
                          style="
                            display: inline-block;
                            vertical-align: top;
                            padding-top: 1px;
                          "
                          >城市层级</span
                        >
                        <span
                          style="cursor: pointer; font-size: 15px"
                          @click="openModal"
                        >
                          <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tips" />
                          </svg>
                        </span>
                      </div>
                      <div v-if="columnData2.length > 0">
                        <div
                          id="column2"
                          style="
                            width: 400px;
                            margin-left: 90px;
                            margin-top: 20px;
                          "
                        ></div>
                      </div>
                      <div style="width: 500px; margin-left: 38px" v-else>
                        <div class="no-data">数据量较小，暂不支持分析</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-container" v-else>
            <div class="model-container">
              <div
                class="model-bg"
                style="
                  min-height: 660px;
                  padding-bottom: 75px;
                  position: relative;
                "
              >
                <PageNoPower></PageNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 展示城市层级弹层 -->
    <a-modal
      v-model="cityModal"
      width="1000px"
      :footer="null"
      :title="null"
      destroyOnClose
      on-ok="readhandleOk"
    >
      <div class="popup">
        <div class="city">
          <div class="city-title">一线城(4个)</div>
          <div class="city-content">北京、上海、广州、深圳</div>
        </div>
        <div class="city">
          <div class="city-title">新一线城(15个)</div>
          <div class="city-content">
            成都、重庆、杭州、武汉、西安、郑州、青岛、长沙、天津、苏州、南京、东莞、沈阳、合肥、佛山
          </div>
        </div>
        <div class="city">
          <div class="city-title">二线城(30个)</div>
          <div class="city-content">
            昆明、福州、无锡、厦门、哈尔滨、长春、南昌、济南、宁波、大连、贵阳、温州、石家庄、泉州、南宁、金华、常州、珠海、惠州、嘉兴、南通、中山、保定、兰州、台州、徐州、太原、绍兴、烟台、廊坊
          </div>
        </div>
        <div class="city">
          <div class="city-title">三线城(70个)</div>
          <div class="city-content">
            海口、汕头、潍坊、扬州、洛阳、乌鲁木齐、临沂、唐山、镇江、盐城、湖州、赣州、漳州、揭阳、江门、桂林、邯郸、泰州、济宁、呼和浩特、咸阳、芜湖、三亚、阜阳、淮安、遵义、银川、衡阳、上饶、柳州、淄博、莆田、绵阳、湛江、商丘、宜昌、沧州、连云港、南阳、蚌埠、驻马店、滁州、邢台、潮州、秦皇岛、肇庆、荆州、周口、马鞍山、清远、宿州、威海、九江、新乡、信阳、襄阳、岳阳、安庆、菏泽、宜春、黄冈、泰安、宿迁、株洲、宁德、鞍山、南充、六安、大庆、舟山
          </div>
        </div>
        <div class="city">
          <div class="city-title">四线城(90个)</div>
          <div class="city-content">
            常德、渭南湖、孝感、丽水、运城、德州、张家口、鄂尔多斯、阳江、泸州、丹东、曲靖、乐山、许昌、湘潭、晋中、安阳、齐齐哈尔、北海、宝鸡、抚州、景德镇、延安、三明、抚顺、亳州、日照、西宁、衢州、拉萨、淮北、焦作、平顶山、滨州、吉安、濮阳、眉山、池州、荆门、铜仁、长治、衡水、铜陵、承德、达州、邵阳、德阳、龙岩、南平、淮南、黄石、营口、东营、吉林、韶关、枣庄、包头、怀化、宣城、临汾、聊城、梅州、盘锦、锦州、榆林、玉林、十堰、汕尾、咸宁、宜宾、永州、益阳、黔南州、黔东南、恩施、红河、大理、大同、鄂州、忻州、吕梁、黄山、开封、郴州、茂名、漯河、葫芦岛、河源、娄底、延边
          </div>
        </div>
        <div class="city">
          <div class="city-title">五线城(128个)</div>
          <div class="city-content">
            汉中、辽阳、四平、内江、六盘水、安顺、新余、牡丹江、晋城、自贡、三门峡、赤峰、本溪、防城港、铁岭、随州、广安、广元、天水、遂宁、萍乡、西双版纳、绥化、鹤壁、湘西、松原、阜新、酒泉、张家界、黔西南、保山、昭通、河池、来宾、玉溪、梧州、鹰潭、钦州、云浮、佳木斯、克拉玛依、呼伦贝尔、贺州、通化、阳泉、朝阳、百色、毕节、贵港、丽江、安康、通辽、德宏、朔州、伊犁、文山、楚雄、嘉峪关、凉山、资阳、锡林郭勒盟、雅安、普洱、崇左、庆阳、巴音郭楞（巴州）、乌兰察布、白山、昌吉、白城、兴安盟、定西、喀什、白银、陇南、巴彦淖尔、巴中、鸡西、乌海、临沧、海东、张掖、商洛、黑河、哈密、吴忠、攀枝花、双鸭山、阿克苏、石嘴山、阿拉善盟、海西、平凉、林芝、固原、武威、儋州、吐鲁番、甘孜、辽源、临夏、铜川、金昌、鹤岗、伊春、中卫、怒江、和田、迪庆、甘南、阿坝、大兴安岭、七台河、山南、日喀则、塔城、博尔塔拉、昌都、阿勒泰、玉树、海南、黄南、果洛、克孜勒苏、阿里、海北、那曲、三沙
          </div>
        </div>
        <div style="padding: 0 280px; margin-top: 20px">
          <div id="cityChart" style="width: 400px"></div>
        </div>
      </div>
    </a-modal>
    <Loading ref="load" :show="1" :isLoading="isLoading || otherLoading"></Loading>
  </div>
</template>
<style scoped lang="scss" src="@/style/scss/pages/publish/detail.scss"></style>
<script>
import { Chart } from "@antv/g2";
import {
  INDUSTRY_AUTHOR_INFO,
  INDUSTRY_AUTHOR_GOODS,
  INDUSTRY_AUTHOR_READER_BASE,
} from "../../apis/industry.js";
export default {
  data() {
    return {
      pagePower: true,
      authorInfo: {
        weibo:{
          fans_count: 0,
          link: "",
          nickname: "",
          rank: 0,
        },
        douyin:{
          fans_count: 0,
          link: "",
          nickname: "",
          rank: 0,
        },
      },
      tabKey: "3",
      author_id: 0,
      page: 1,
      pageSize: 20,
      total: 0,
      goodsList: [],
      isLoading: true,
      otherLoading: true,
      editPower: true,
      saleType: "on_sale",
      // 作者分析
      baseData: {
        onsale_count: 0, // 在销品种数
        popular_count: 0, // 畅销品种数
        frequently_count: 0, // 常销品种数
        sale_total: 0, // 销售指数
      },
      ringData1: [],
      ringChange1: null,
      ringData2: [],
      ringChange2: null,
      columnData1: [],
      columnChange1: null,
      columnData2: [],
      columnChange2: null,
      cityModal: false,
      popupCityChart: null,
    };
  },
  mounted() {
    this.author_id = this.$route.query.author_id;
    if (this.$refs.head.accountInfo.type == 1) {
      this.editPower = true;
    } else {
      this.editPower = false;
    }
    this.getData();
    this.getReaderData();
  },
  methods: {
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        author_id: this.author_id,
        organization_id: this.$refs.head.publishInfo.organization_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_AUTHOR_INFO(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.authorInfo = res.data;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    async getList() {
      var tStamp = this.$getTimeStamp();
      let data = {
        author_id: this.author_id,
        organization_id: this.$refs.head.publishInfo.organization_id,
        page: this.page,
        page_size: this.pageSize,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_AUTHOR_GOODS(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.goodsList = [];
        res.data.list.map((value, key) => {
          value.active = false;
          this.goodsList.push(value);
        });
        this.total = res.data.total;
        this.$nextTick(() => {
          this.otherLoading = false;
        });
      } else {
        this.otherLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 读者画像
    async getReaderData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        author_id: this.author_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await INDUSTRY_AUTHOR_READER_BASE(data);
      if (res.code == 0) {
        this.pagePower = true;
        this.ringData1 = [];
        this.ringData2 = [];
        this.columnData1 = [];
        this.columnData2 = [];
        this.baseData = res.data.book_base;
        if (Object.keys(res.data.reader_base).length > 0) {
          let _total1 = 0,
            _total2 = 0,
            _total3 = 0,
            _total4 = 0;
          this.readerBase = res.data.reader_num;
          this.readerAverage = res.data.reader_avg_buy;
          // 性别分布
          res.data.reader_base.persona_sex.map((value, key) => {
            _total1 += Number(value.value);
          });
          if (_total1 > 0) {
            for (let i = 0; i < 3; i++) {
              let _obj = {
                value: 0,
              };
              if (i == 0) {
                _obj.name = "男性";
              } else if (i == 1) {
                _obj.name = "女性";
              } else if (i == 2) {
                _obj.name = "未知";
              }
              this.ringData1.push(_obj);
            }
            res.data.reader_base.persona_sex.map((value, key) => {
              let _num = (Number(value.value) / _total1) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "男") {
                this.ringData1[0].value = _num;
              } else if (value.name == "女") {
                this.ringData1[1].value = _num;
              } else if (value.name == "未知") {
                this.ringData1[2].value = _num;
              }
            });
          }
          // 消费能力
          res.data.reader_base.persona_money.map((value, key) => {
            _total2 += Number(value.value);
          });
          if (_total2 > 0) {
            for (let i = 0; i < 4; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "30元以下";
              } else if (i == 1) {
                _obj.name = "30-60元";
              } else if (i == 2) {
                _obj.name = "60-100元";
              } else if (i == 3) {
                _obj.name = "100元以上";
              }
              this.ringData2.push(_obj);
            }
            res.data.reader_base.persona_money.map((value, key) => {
              let _num = (Number(value.value) / _total2) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "低消费") {
                this.ringData2[0].value = _num;
              } else if (value.name == "中低消费") {
                this.ringData2[1].value = _num;
              } else if (value.name == "中高消费") {
                this.ringData2[2].value = _num;
              } else if (value.name == "高消费") {
                this.ringData2[3].value = _num;
              }
            });
          }
          // 年龄分布
          res.data.reader_base.persona_age.map((value, key) => {
            _total3 += Number(value.value);
          });
          if (_total3 > 0) {
            for (let i = 0; i < 6; i++) {
              let _obj = {
                value: 0,
                type: "this",
              };
              if (i == 0) {
                _obj.name = "18-25岁";
              } else if (i == 1) {
                _obj.name = "26-30岁";
              } else if (i == 2) {
                _obj.name = "31-35岁";
              } else if (i == 3) {
                _obj.name = "36-40岁";
              } else if (i == 4) {
                _obj.name = "41-50岁";
              } else if (i == 5) {
                _obj.name = "51岁以上";
              }
              this.columnData1.push(_obj);
            }
            res.data.reader_base.persona_age.map((value, key) => {
              let _num = (Number(value.value) / _total3) * 100;
              _num = _num ? Number(_num.toFixed(2)) : 0;
              if (value.name == "小年轻") {
                this.columnData1[0].value = _num;
              } else if (value.name == "青年") {
                this.columnData1[1].value = _num;
              } else if (value.name == "青壮年") {
                this.columnData1[2].value = _num;
              } else if (value.name == "中青年") {
                this.columnData1[3].value = _num;
              } else if (value.name == "中年") {
                this.columnData1[4].value = _num;
              } else if (value.name == "中老年") {
                this.columnData1[5].value = _num;
              }
            });
          }
          // 城市层级
          if (res.data.reader_base.persona_city) {
            res.data.reader_base.persona_city.map((value, key) => {
              _total4 += Number(value.value);
            });
            if (_total4 > 0) {
              for (let i = 0; i < 6; i++) {
                let _obj = {
                  value: 0,
                };
                if (i == 0) {
                  _obj.name = "一线城市";
                } else if (i == 1) {
                  _obj.name = "二线城市";
                } else if (i == 2) {
                  _obj.name = "三线城市";
                } else if (i == 3) {
                  _obj.name = "四线城市";
                } else if (i == 4) {
                  _obj.name = "五线城市";
                } else if (i == 5) {
                  _obj.name = "新一线城市";
                }
                this.columnData2.push(_obj);
              }
              res.data.reader_base.persona_city.map((value, key) => {
                let _num = (Number(value.value) / _total4) * 100;
                _num = _num ? Number(_num.toFixed(2)) : 0.0;
                if (value.name == "一线城市") {
                  this.columnData2[0].value = _num;
                } else if (value.name == "二线城市") {
                  this.columnData2[1].value = _num;
                } else if (value.name == "三线城市") {
                  this.columnData2[2].value = _num;
                } else if (value.name == "四线城市") {
                  this.columnData2[3].value = _num;
                } else if (value.name == "五线城市") {
                  this.columnData2[4].value = _num;
                } else if (value.name == "新一线城市") {
                  this.columnData2[5].value = _num;
                }
              });
            }
          }
          let _this = this;
          this.$nextTick(() => {
            if (_this.ringData1.length > 0) {
              if (_this.ringChange1) {
                _this.ringChange1.destroy();
                _this.initRing1();
              } else {
                _this.initRing1();
              }
            }
            if (_this.ringData2.length > 0) {
              if (_this.ringChange2) {
                _this.ringChange2.destroy();
                _this.initRing2();
              } else {
                _this.initRing2();
              }
            }
            if (_this.columnData1.length > 0) {
              if (_this.columnChange1) {
                _this.columnChange1.destroy();
                _this.initColumn1();
              } else {
                _this.initColumn1();
              }
            }
            if (_this.columnData2.length > 0) {
              if (_this.columnChange2) {
                _this.columnChange2.destroy();
                _this.initColumn2();
              } else {
                _this.initColumn2();
              }
            }
            _this.otherLoading = false;
          });
        } else {
          this.otherLoading = false;
        }
      } else {
        this.otherLoading = false;
        if (res.code == 1009) {
          this.pagePower = false;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 打开城市弹层
    openModal() {
      this.cityModal = true;
      this.$nextTick(() => {
        this.initPopupChart();
      });
    },
    bodyClick() {
      this.goodsList = this.goodsList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    openAuthor(item, index) {
      this.goodsList = this.goodsList.map((value, key) => {
        if (index == key) {
          value.active = true;
        } else {
          value.active = false;
        }
        return value;
      });
    },
    callback(key) {
      this.tabKey = key;
      if (key == "1") {
        this.otherLoading = true;
        this.getList();
      } else if (key == "2") {
      } else if (key == "3") {
        this.otherLoading = true;
        this.getReaderData();
      }
    },
    toEdit() {
      if (this.editPower) {
        this.$router.push({
          name: "authoredit",
          query: { author_id: this.author_id },
        });
      }
    },
    onShowSizeChange(current, pageSize) {
      this.otherLoading = true;
      this.page = current;
      this.getList();
    },
    // 性别分布饼图
    initRing1() {
      let data = this.ringData1;
      this.ringChange1 = new Chart({
        container: "ring1",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.ringChange1.data(data);
      this.ringChange1.legend(false);
      this.ringChange1.tooltip(false);
      this.ringChange1.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "男性") {
            color = "#2B6AE7";
          } else if (data[0].name === "女性") {
            color = "#EA5D73";
          } else if (data[0].name === "未知") {
            color = "#FF8C3F";
          }
          data.push({ name: "其他", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 23,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.ringChange1.render();
    },
    // 消费柱状图
    initRing2() {
      let _this = this,
        data = [],
        _arr = [];
      this.ringData2.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.ringData2];
      this.ringChange2 = new Chart({
        container: "ring2",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.ringChange2.data(data);
      this.ringChange2.scale("value", {
        nice: true,
      });
      this.ringChange2.axis(false);
      this.ringChange2.axis(false);
      this.ringChange2.tooltip(false);
      this.ringChange2.interaction("active-region");
      this.ringChange2.legend(false);
      this.ringChange2
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == "30元以下" && type == "this") {
            return "#26A4D0";
          } else if (val == "30-60元" && type == "this") {
            return "#4179EA";
          } else if (val == "60-100元" && type == "this") {
            return "#685FA7";
          } else if (val == "100元以上" && type == "this") {
            return "#F5A726";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.ringChange2.render();
    },
    // 年龄分布柱状图
    initColumn1() {
      let _this = this,
        data = [],
        _arr = [];
      this.columnData1.map((value, key) => {
        let _obj = {
          value: 100 - value.value,
          name: value.name,
          type: "other",
        };
        _arr.push(_obj);
      });
      data = [..._arr, ...this.columnData1];
      this.columnChange1 = new Chart({
        container: "column1",
        autoFit: true,
        autoHide: false,
        padding: [10, 0, 0, 0],
        height: 140,
      });
      this.columnChange1.data(data);
      this.columnChange1.scale("value", {
        nice: true,
      });
      this.columnChange1.axis(false);
      this.columnChange1.axis(false);
      this.columnChange1.tooltip(false);
      this.columnChange1.interaction("active-region");
      this.columnChange1.legend(false);
      this.columnChange1
        .interval()
        .position("name*value")
        .color("name*type", (val, type) => {
          if (val == this.columnData1[0].name && type == "this") {
            return "#7079E0";
          } else if (val == this.columnData1[1].name && type == "this") {
            return "#D15B7E";
          } else if (val == this.columnData1[2].name && type == "this") {
            return "#FC6E6C";
          } else if (val == this.columnData1[3].name && type == "this") {
            return "#FFA06B";
          } else if (val == this.columnData1[4].name && type == "this") {
            return "#FFB64D";
          } else if (val == this.columnData1[5].name && type == "this") {
            return "#FFDB3F";
          } else {
            return "#EDF6FC";
          }
        })
        .adjust("stack");
      this.columnChange1.render();
    },
    // 城市层级饼图
    initColumn2() {
      let _num = (
          this.columnData2[0].value +
          this.columnData2[1].value +
          this.columnData2[5].value
        ).toFixed(2),
        _num1 = (this.columnData2[2].value + this.columnData2[3].value).toFixed(
          2
        );
      let data = [
        {
          name: "一二线城市",
          value: Number(_num),
        },
        {
          name: "三四线城市",
          value: Number(_num1),
        },
        { name: "五线城市", value: this.columnData2[4].value },
      ];
      this.columnChange2 = new Chart({
        container: "column2",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 234,
      });
      this.columnChange2.data(data);
      this.columnChange2.legend(false);
      this.columnChange2.tooltip(false);
      this.columnChange2.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.columnChange2.render();
    },
    // 弹层城市层级饼图
    initPopupChart() {
      let data = [
        {
          name: "一二线城市人口",
          value: 31.0,
        },
        {
          name: "三四线城市人口",
          value: 51.0,
        },
        { name: "五线城市人口", value: 18.0 },
      ];
      this.popupCityChart = new Chart({
        container: "cityChart",
        autoFit: true,
        padding: [-80, 0, 0, 0],
        height: 200,
      });
      this.popupCityChart.data(data);
      this.popupCityChart.legend(false);
      this.popupCityChart.tooltip(false);
      this.popupCityChart.facet("rect", {
        fields: ["name"],
        // padding: 20,
        showTitle: false,
        eachView: (view, facet) => {
          const data = facet.data;
          let color;
          if (data[0].name === "一二线城市人口") {
            color = "#EB5E13";
          } else if (data[0].name === "三四线城市人口") {
            color = "#FFDD58";
          } else if (data[0].name === "五线城市人口") {
            color = "#F8E692";
          }
          data.push({ name: "未知", value: 100 - data[0].value });
          view.data(data);
          view.coordinate("theta", {
            radius: 0.9,
            innerRadius: 0.75,
          });
          view
            .interval()
            .adjust("stack")
            .position("value")
            .color("name", [color, "#EDF6FC"])
            .style({
              opacity: 1,
            });
          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].name,
            style: {
              fontSize: 12,
              fill: "#7789AF",
              fontWeight: 300,
              textBaseline: "bottom",
              textAlign: "center",
            },
            offsetY: 25,
          });

          view.annotation().text({
            position: ["50%", "85%"],
            content: data[0].value + "%",
            style: {
              fontSize: 12,
              fill: "#07193F",
              fontWeight: 700,
              textAlign: "center",
            },
          });

          // view.interaction("element-active");
        },
      });
      this.popupCityChart.render();
    },
    publisherChange() {
      this.isLoading = true;
      this.otherLoading = true;
      this.page = 1;
      if (this.$refs.head.accountInfo.type == 1) {
        this.editPower = true;
      } else {
        this.editPower = false;
      }
      this.tabKey = "3";
      this.getData();
      this.getReaderData();
    },
  },
};
</script>
